<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册中心</title>
    <link rel="stylesheet" href="/static/css/semantic.min.css" />

    <style>
        .page {
            padding: 80px 0 0;
            width: 100%;
            max-width: 380px;
            min-width: 380px;
            background-color: #fff;
            border-radius: 2px;
            -webkit-border-radius: 2px;
            color: #858585;
            margin-left: auto;
            margin-right: auto;
        }

        .page .ui.form .field {
            margin: 0 0 1.5em;
        }

        .page .ui.form .field.label {
            margin: 1.5em 0 .5em;
        }
        .top.header {
            background-color: #fff;
            font-size: 14px;
            height: 45px;
            border-bottom: 1px solid #EBEDED;
            position: fixed;
            width: 100%;
            z-index: 70;
        }

        .ui.button.disabled {
            cursor: not-allowed;
        }

    </style>
</head>
<body>
<div class="top header">
    <div class="logo">
        <a href="https://www.houdezhihui.com" class="ui mini image" target="_blank">
            <img src="/static/img/hd.png">
        </a>
<!--
        <img alt="" src="/static/img/hd.png">
        <h2>智慧 社区</h2>
-->
    </div>
</div>
<div class="page">
    <h1 class="ui green horizontal divider header">
        <i class="map signs icon"></i>
        注册
    </h1>

    <form class="ui form" method="post">

        <div class="required field">
            <div class="ui left icon input">
                <input name="name" type="text" placeholder="请输入昵称" autocomplete="on">
                <i class="user icon"></i>
            </div>
        </div>

        <div class="required field">
            <div class="ui left icon input">
                <input name="password" type="password" placeholder="请输入密码" autocomplete="off">
                <i class="lock icon"></i>
            </div>
        </div>
        <div class="required field">
            <div class="ui left icon input">
                <input name="confirm" type="password" placeholder="请确认密码" autocomplete="off">
                <i class="lock icon"></i>
            </div>
        </div>

        <div class="required field">
            <div class="ui left icon input">
                <input name="phone" type="text" placeholder="请输入联系人手机号码" autocomplete="on">
                <i class="mobile icon"></i>
            </div>
        </div>

        <div class="required field">
            <div class="ui left icon action input">
                <input name="code" type="text" placeholder="请输入短信验证码">
                <i class="protect icon"></i>
                <div id="send_code" class="ui button"><span>获取短信验证码</span></div>
            </div>
        </div>

        <div class="field label">
            <label>角色类别</label>
        </div>

        <div class="inline fields">
            <div class="left floated field">
                <div class="ui radio checkbox">
                    <input type="radio" name="role" value="p">
                    <label>社区/物业管理员</label>
                </div>
            </div>
            <div class="right floated field">
                <div class="ui radio checkbox">
                    <input type="radio" name="role" value="s">
                    <label>第三方服务商</label>
                </div>
            </div>
        </div>

        <div class="required field" id="role"></div>

        <!--<div class="required field">
            <input type="text" name="pname" placeholder="请输入社区物业公司">
        </div>
        <div class="required field">
            <input type="text" name="sname" placeholder="请输入服务商名称">
        </div>-->

        <div class="ui hidden divider"></div>


        <div class="ui fluid field">
            <input class="ui fluid green submit button" type="submit" value="注册">
        </div>
        <p class="sign-up-msg">
            点击 “注册” 即表示您同意并接受
            <a target="_blank" href="#">用户协议</a> 和 <a target="_blank" href="#">隐私政策</a> 。</p>

        <div class="ui error message"></div>
        <div id="info"></div>
    </form>

    <div class="ui divider"></div>
    <div class="ui hidden divider"></div>
    <div class="ui centered grid">
        已有账户？
        <a href="/login">登录</a>
    </div>
</div>

<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/js/semantic.min.js"></script>

<script src="/static/js/core.min.js"></script>
<script src="/static/js/md5.min.js"></script>
<script src="/static/js/charcode.js"></script>

<script>
    $('input[type=radio]').on('focus', function (e) {
        var target = $(e.target);
        var role_div = $('#role');
        if(target.val() === 'p') {
            if(role_div.find('input[name=pname]').length === 1) {
                return;
            }
            var p = $('<div class="ui left icon input">' +
                    '<input type="text" name="pname" placeholder="请输入社区物业公司">' +
                    '<i class="trademark icon"></i></div>');
            role_div.html('');
            role_div.append(p);
            //
            bindForm();
        } else if(target.val() === 's') {
            if(role_div.find('input[name=sname]').length === 1) {
                return;
            }

            var s = $('<div class="ui left icon input">' +
                    '<input type="text" name="sname" placeholder="请输入服务商名称">' +
                    '<i class="registered icon"></i></div>');
            role_div.html('');
            role_div.append(s);
            //
            bindForm();
        }
    });

    function bindForm() {
        $('.ui.form')
            .form({
                fields: {
                    name: {
                        identifier: 'name',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入昵称'
                            }
                        ]
                    },
                    password: {
                        identifier: 'password',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入密码'
                            },
                            {
                                type   : 'regExp[(?![0-9]*$)(?![a-z A-Z]*$)[a-z A-Z 0-9]{6,}]',
                                prompt : '请输入超过6位的由字母和数字组合的密码'
                            }
                        ]
                    },
                    confirm: {
                        identifier: 'confirm',
                        rules: [
                            {
                                type   : 'match[password]',
                                prompt : ' 两次密码不一致'
                            }
                        ]
                    },
                    phone: {
                        identifier: 'phone',
                        rules: [
                            {
                                type   : 'empty',
                                prompt :  '请填写手机号码'
                            },
                            {
                                type   : 'regExp[/^(13|14|15|17|18)[0-9]{9}$/]',
                                prompt : '请填写有效的11位手机号码'
                            }
                        ]
                    },
                    code: {
                        identifier: 'code',
                        rules: [
                            {
                                type   : 'empty',
                                prompt :  '请填短信验证码'
                            }
                        ]
                    },
                    role: {
                        identifier: 'role',
                        rules: [
                            {
                                type   : 'checked',
                                prompt : '请选择角色类别'
                            },
                            {
                                type   : 'regExp[s|p]',
                                prompt : '角色类别错误'
                            }
                        ]
                    },
                    pname: {
                        identifier: 'pname',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入物业公司'
                            }
                        ]
                    },
                    sname: {
                        identifier: 'sname',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入服务商'
                            }
                        ]
                    }
                },
                inline: true,
                onSuccess: function (event, fields) {
                    fields['password'] = encrypt(fields['password']);
                    alert(1);
                    $('input[name=password]').val(fields['password']);

                    console.info(fields);
                    disableForm();

                    //return false;
                }
            })
        ;
    }




    
    function disableForm() {
        var inputs = $('.ui.form').find('input');
        inputs.addClass('disabled');
        inputs.attr('disabled', 'disabled');
        $('.ui.form').find('ui.button').addClass('disabled');
    }

    function enableForm() {
        var inputs = $('.ui.form').find('input');
        inputs.removeClass('disabled');
        inputs.removeAttr('disabled');
        $('.ui.form').find('ui.button').removeClass('disabled');
    }

    function disableSendCode() {
        $('input[name=phone]').addClass('disabled');
        $('input[name=code]').addClass('disabled');
        $('input[name=phone]').attr('disabled', 'disabled');
        $('input[name=code]').attr('disabled', 'disabled');

        $('#send_code').addClass('disabled');
        var width = $('#send_code').find('span').css('width');
        var loading = $('<i class="large spinner loading icon"></i>');
        loading.css('width', width);
        $('#send_code').html('');
        $('#send_code').append(loading);
    }

    function enableSendCode() {
        $('input[name=phone]').removeClass('disabled');
        $('input[name=code]').removeClass('disabled');
        $('input[name=phone]').removeAttr('disabled');
        $('input[name=code]').removeAttr('disabled');

        $('#send_code').removeClass('disabled');
        $('#send_code').html('<span>获取短信验证码</span>');
    }

    function clearFormError() {
        $('.ui.form').find('.ui.error.message').html('');
    }

    function sendCode(result) {
    var sucInfo = $(
        '<div class="ui positive message">' +
        '<i class="close icon"></i>' +
        '<div class="header">操作信息提示</div>' +
        '<ul class="list">' +
        '<li>验证码已成功发送，请注意查看.</li>' +
        '</ul>' +
        '</div>'),
        warInfo = $(
            '<div class="ui warning message">' +
            '<i class="close icon"></i>' +
            '<div class="header">操作信息提示</div>' +
            '<ul class="list">' +
            '<li>操作过于频繁，请稍后再试.</li>' +
            '</ul>' +
            '</div>'
        ),
        errInfo = $(
            '<div class="ui negative message">' +
            '<i class="close icon"></i>' +
            '<div class="header">操作信息提示</div>' +
            '<ul class="list">' +
            '<li>验证码发送失败，请稍后再试.</li>' +
            '</ul>' +
            '</div>'
        );

        //
        if(result === true) {
            var phone_number = $('.ui.form').form('get value', 'phone');
            //call message api to send verify code
            var post_data = {
                phone: phone_number
            }
            $.ajax({
                url:'',
                method:'POST',
                dataType : 'json',
                contentType : 'application/json',
                data: JSON.stringify(post_data)
            }).done(function (data) {
                $('#info').html('');
                //操作成功
                $('#info').append(sucInfo);
                //操作失败
                warInfo.find('ul.list').html('<li>失败1</li><li>失败2</li><li>失败3</li>');
                $('#info').append(warInfo);
                closeMsg();

            }).fail(function (data) {
                console.info(data);
                //操作失败
                $('#info').html('');
                $('#info').append(errInfo);
                closeMsg();
            }).always(function () {
                enableSendCode();
            });
            //console.info('已发送验证码');
        } else {
            enableSendCode();
            $('.ui.form').form('add errors',{
                phone: '请输入正确的手机号码'
            });
        }

    }
    $('.ui.form').find('#send_code.ui.button').click(function (e) {
        //
        var phone = $('input[name=phone]');
        var rules = $('.ui.form').form('get validation', phone);
        var result = $('.ui.form').form('validate field', rules);
        //
        $('#info').html('');
        $('input[name=phone]').removeClass( "error" );
        clearFormError();
        disableSendCode();
        setTimeout(sendCode, 500, result);
    });

    function closeMsg() {
        $('.message .close')
            .on('click', function() {
                $(this)
                    .closest('.message')
                    .transition('fade')
                ;
            })
        ;
    }

    bindForm();
</script>

</body>
</html>